<template>
  <div class="foSi14" style="padding-top: 30px;">
    <div class="mar" style="width: 840px;">
      <div class="wid100 dis disAl disJuB hei30">
        <div class="foSi16">
          <span>{{ venue?venue.name:'' }}</span>
          <span class="mar-left5 ">当前短信余额：<span class="foSi24" style="color: #f49352;">{{list.message_num}}</span>条</span>
        </div>
        <div class="dis disAl cuPo" style="color: #48a9f3;" @click.stop="listRecord">
          <svg-icon icon-class="top-up-record" class="mar0" style="width: 19px;height: 19px;" />
          <span>充值记录</span>
        </div>
      </div>
      <div class="title">选择短信套餐</div>
      <div class="dis disAl flwa" style="overflow: hidden;">
        <div v-for="(item,index) in list.setmenu" :key="index" class="list">
          <div class="detail">
            <p class="num mp0">{{ item.message_num }}</p>
            <p class="text mp0">条短信</p>
            <div class="separator" />
            <p class="price mp0">￥{{item.price}}</p>
          </div>
          <div class="sms-buy cuPo" @click.stop="goumai(item)">立即购买</div>
        </div>
      </div>
      <div class="mar-top20">
        <h3 class="title mp0">联系商务</h3>
        <div style="display: flex">
          <div class="dis disAl mar-top10" v-for="(item,index) in list.commercia" :key="index">
            <svg-icon icon-class="business-contacts" class="mar0" style="width: 34px;height: 34px;" />
            <div class="mar-left20" style="margin-right: 55px;">
              <p class="foSi16 mar-bott5" style="marght-top: 0;">{{ item.name }}</p>
              <p class="foSi20 mp0" style="color: #f49352;">{{ item.mobile }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="hei30" />
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import { check_message, setmenu } from '@/api/sms'
export default {
  name: 'SmsTopUp',
  components: {
    Pagination
  },
  data() {
    return {
      list: null,
      venue: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    this.venue = JSON.parse(localStorage.getItem('venue'))
    var xuanList = [{
      name: '充值',
      url: '/sms/smsTopUp',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
  },
  methods: {
    goumai(item) {
      this.$router.push({
        path: '/sms/smsBuy?id=' + item.id + '&message_num=' + item.message_num + '&price=' + item.price + '&old_price=' + item.old_price
      })
    },
    listRecord() {
      this.$router.push({
        path: '/sms/smsRecord'
      })
    },
    getList() {
      var data = {}
      setmenu(data).then(response => {
        const {
          data
        } = response
        this.list = data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.title {
		padding: 30px 0;
		color: #787878;
	}

	.list {
		float: left;
		width: 158px;
		height: 208px;
		padding: 15px;
		margin-right: 52px;
		margin-bottom: 30px;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		border: 4px solid #e6e6e6;
		border-radius: 2px;
		text-align: center;
	}

	.num {
		color: #41c3a8;
		font-size: 40px;
		height: 50px;
		overflow: hidden;
	}

	.text {
		color: #41c3a8;
	}

	.separator {
		height: 2px;
		background: #e3e3e3;
		margin: 15px 0 8px;
	}

	.price {
		color: #f49352;
		font-size: 16px;
	}

	.sms-buy {
		display: block;
		height: 40px;
		margin-top: 15px;
		background: #f49352;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 2px;
	}
</style>
